<template>
  <div>
       <!-- 头部 -->
    <header>
        <div class="title">
            <span class="iconfont">&#xe6bc;</span>
            <h2>溪牧原山茶花洁面乳清洁</h2>
            <p>
                <span class="iconfont">&#xf0112;</span>
                <span class="iconfont">&#xe71e;</span>
                <i></i>
            </p>
        </div>
        <nav>
            <a href="#" class="cur">商品</a>
            <a href="#">评价</a>
            <a href="#">详情</a>
            <a href="#">推荐</a>
        </nav>
    </header>
    <!-- 主体 -->
    <main>
        <div id="con">
            <img src="images/shop.jpg" alt="">
            <b>8/8</b>
            <span class="iconfont">&#xe613;</span>
            <div class="text">
                <p>
                    <strong>￥</strong>999 <del> ￥1099</del> 
                    <em><i class="iconfont">&#xe60f;</i>收藏
                    </em>
                </p>
                <p>溪牧原山茶花洁面泡沫 氨基酸洗面奶 150ML</p>
                <p>敏感肌可用，控油祛痘、男女可用、泡沫绵密、温和不紧绷</p>
                <p>11.11限时299元起</p>
                <p> <i>此商品于2020-11-11.00点结束闪购特卖品牌美妆闪购专场</i> <em class="iconfont">查看&#xe601;</em></p>
            </div>
        </div>
        <!-- 领劵分期 -->
        <div id="con2">
            <div class="coupons">
                <span>领劵</span>
                <p><img src="images/juan.png" alt=""></p>
            </div>
            <div class="substep clearfix">
                <span>分期</span>
                <p class="clearfix">
                    <em>可选3/6/12期</em>
                    <b class="iconfont">&#xe601;</b>
                </p>
                
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer>
        <div class="front">
            <p>
                <i class="iconfont">&#xe62d;</i>
                <span>客服</span>
            </p>
            <p>
                <i class="iconfont">&#xe663;</i>
                <span>商店</span>
            </p>
            <p>
                <i class="iconfont">&#xe612;</i>
                <span>购物车</span>
            </p>
        </div>

        <p class="after">
            <input type="text" value="加入购物车">
            <input type="text" value="立即购买">
        </p>
        <b></b>
    </footer>
  </div>
</template>

<script>
export default {

}
</script>

<style>
@import "../../public/css/details.css";

</style>